<template>
  <div class="wrapper">
    <comment-header :title="'我的电影'"></comment-header>
    <love-list :list="loveList" :title="'我的收藏'" class="love-list"/>
    <movie-list :title="'我的评论'" :list="movieList" @choose="movieChange" class="movie-list"></movie-list>
    <comment :list="commentList" v-show="movieList.length" @delete="deleteComment"></comment>
    <top :show="topShow"/>
  </div>
</template>
<script>
import MovieList from './components/List'
import Comment from './components/Comment'
import CommentHeader from 'common/header/Header'
import LoveList from 'common/ListSlider'
import Top from 'common/Top'
import axios from 'axios'
import qs from 'qs'
export default {
  name: 'MyMovie',
  components: {
    MovieList,
    Comment,
    CommentHeader,
    Top,
    LoveList
  },
  data () {
    return {
      movieList: [],
      id: 0,
      commentList: [],
      topShow: false,
      loveList: []
    }
  },
  methods: {
    getMyLove () {
      axios.get('/api/usr/myLove').then(this.getLoveSucc)
    },
    getLoveSucc (res) {
      res = res.data
      this.loveList = res.data
    },
    handleScroll () {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 20) {
        this.topShow = true
      } else {
        this.topShow = false
      }
    },
    updateUserInfo () {
      axios.post('/api/usr/usrInfo').then(this.updateInfoSucc)
    },
    updateInfoSucc (res) {
      res = res.data.data
      this.$store.commit('changeNickname', {
        nickname: res.nickname
      })
      this.$store.commit('changeAvatar', {
        avatar: res.head_pic
      })
    },
    getMovieList () {
      axios.post('/api/usr/myCommentMovie').then(this.getMovieSucc)
    },
    getMovieSucc (res) {
      res = res.data
      this.movieList = res.data.movieList
      if (!this.movieList.length) return
      this.id = this.movieList[0].movie_id
      this.getCommentList()
    },
    movieChange (id) {
      this.id = id
      this.getCommentList()
    },
    getCommentList () {
      axios.post('/api/usr/myComment', qs.stringify({
        movie_id: this.id
      })).then(this.getCommentSucc)
    },
    getCommentSucc (res) {
      res = res.data
      this.commentList = res.data.commentList
    },
    deleteComment (id, time) {
      this.commentList.splice(id, 1)
      axios.post('/api/usr/deleteMyComment/' + time).then(function (response) {
      })
    }
  },
  mounted () {
    this.getMovieList()
    this.updateUserInfo()
    this.getMyLove()
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style lang="stylus" scoped>
  .wrapper
    .love-list
      margin-top: .5rem
</style>
